<template>
	<div>
		<div class="ui padded attached segment m-padded-tb-large m-margin-bottom-big m-box" v-for="item in blogList" :key="item.id">
			<div class="ui large blue right corner label" v-if="item.top">
				<i class="arrow alternate circle up icon"></i>
			</div>
			<div class="ui middle aligned mobile reversed stackable">
				<div class="ui grid m-margin-lr">
					<!--标题-->
					<div class="row m-padded-tb-small">
						<h3 class="ui header m-center m-scaleup-mini">
							<a href="javascript:;" @click.prevent="toBlog(item)" class="m-black">{{ item.title }}</a>
						</h3>
					</div>
					<!--分类-->
					<router-link :to="`/category?name=${item.category.name}`" class="ui orange large ribbon label">
						<i class="small folder open icon"></i><span class="m-text-500">{{ item.category.name }}</span>
					</router-link>
          <!-- 主图与描述 -->
          <div style="display:flex;justify-content: space-between;justify-items: left;text-align: left;margin-top: 10px">
            <div class="m-mobile-hide" style="margin-right: 8px">
              <el-image style="width: 200px; height: 100px" fit="contain" :src="item.firstPicture"></el-image>
            </div>
            <!--文章Markdown描述-->
            <div class="typo line-numbers match-braces rainbow-braces" @click="toBlog(item)" v-html="item.description"></div>
          </div>
					<!--阅读全文按钮-->
<!--					<div class="row m-padded-tb-small m-margin-top">
						<a href="javascript:;" @click.prevent="toBlog(item)" class="color-btn">阅读全文</a>
					</div>-->
					<!--横线-->
<!--					<div class="ui section divider m-margin-lr-no"></div>-->
					<!--标签-->
					<div class="row m-padded-tb-no" style="margin-top: 10px">
						<div class="column m-padding-left-no">
							<router-link :to="`/tag/${tag.name}`" class="ui tag label m-text-500 m-margin-small tag-item" :class="tag.color" v-for="(tag,index) in item.tags" :key="index">{{ tag.name }}</router-link>
						</div>
					</div>
          <!--文章简要信息-->
          <div class="row m-padded-tb-small">
            <div class="ui horizontal link list m-left">
              <div class="item m-datetime">
                <i class="small calendar icon"></i><span>{{ item.createTime | dateFormat('YYYY-MM-DD')}}</span>
              </div>
              <div class="item m-views">
                <i class="small eye icon"></i><span>{{ item.views }}</span>
              </div>
              <div class="item m-common-black">
                <i class="small pencil alternate icon"></i><span>字数: {{ item.words }}字</span>
              </div>
              <!--							<div class="item m-common-black">
                              <i class="small clock icon"></i><span>阅读时长≈{{ item.readTime }}分</span>
                            </div>-->
            </div>
          </div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "BlogItem",
		props: {
			blogList: {
				type: Array,
				required: true
			}
		},
		methods: {
			toBlog(blog) {
				this.$store.dispatch('goBlogPage', blog)
			}
		}
	}
</script>

<style scoped>

.ribbon-t {
  display: inline-block;
  width: 48%;
  height: 188px;
  position: relative;
  float: left;
  margin-bottom: 30px;
  /* background: url(); */
  background-color: antiquewhite;
  background-size: cover;
  text-transform: uppercase;
  color: white;
}
.ribbon:nth-child(even) {margin-right: 4%;}
@media (max-width: 500px) {
  .ribbon {width: 100%}
  .ribbon:nth-child(even) {margin-right: 0%;}
}

.ribbon1 {
  position: absolute;
  top: -6px;
  right: 10px;
}
.ribbon1:after {
  position: absolute;
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-top: 10px solid #f8463f;
  border-left: 53px solid transparent;
  border-right: 53px solid transparent;
}

.ribbon1 span {
  position: relative;
  display: inline-block;
  text-align: center;
  background: #F8463F;
  font-size: 14px;
  line-height: 1;
  padding: 12px 8px 10px;
  border-top-right-radius: 8px;
  width: 90px;
}

.ribbon1 span:before, .ribbon1 span:after {
  position: absolute;
  content: "";
  display: block;
}

.ribbon1 span:before {
  background: #F8463F;
  height: 6px;
  width: 6px;
  left: -6px;
  top: 0;
}

.ribbon1 span:after {
  background: #C02031;
  height: 6px;
  width: 8px;
  border-radius: 8px 8px 0 0;
  left: -8px;
  top: 0;
}


.ribbon2 {
  display: inline-block;
  width: 60px;
  padding: 10px 0;
  background: #F47530;
  top: -6px;
  left: 25px;
  position: absolute;
  text-align: center;
  border-top-left-radius: 3px;
}
.ribbon2:before {
  height: 0;
  width: 0;
  border-bottom: 6px solid #8D5A20;
  border-right: 6px solid transparent;
  right: -6px;
  top: 0;
}
.ribbon2:before, .ribbon2:after {
  content: "";
  position: absolute;
}
.ribbon2:after {
  height: 0;
  width: 0;
  border-left: 30px solid #F47530;
  border-right: 30px solid #F47530;
  border-bottom: 30px solid transparent;
  bottom: -30px;
  left: 0;
}

.ribbon3 {
  display: inline-block;
  position: absolute;
  width: 150px;
  height: 50px;
  line-height: 50px;
  padding-left: 15px;
  background: #59324C;
  left: -8px;
  top: 20px
}
.ribbon3:before, .ribbon3:after {
  content: "";
  position: absolute;
}
.ribbon3:before {
  height: 0;
  width: 0;
  border-bottom: 8px solid black;
  border-left: 8px solid transparent;
  top: -8px;
  left: 0;
}
.ribbon3:after {
  height: 0;
  width: 0;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 15px solid #59324C;
  right: -15px;
}

.ribbon4 {
  position: absolute;
  top: 15px;
  padding: 8px 10px;
  background: #00B3ED;
  box-shadow: -1px 2px 4px rgba(0,0,0,0.5);
}
.ribbon4:before, .ribbon4:after {
  position: absolute;
  content: "";
  display: block;
}
.ribbon4:before {
  width: 7px;
  height: 100%;
  padding: 0 0 7px;
  top: 0;
  left: -7px;
  background: inherit;
  border-radius: 5px 0 0 5px;
}
.ribbon4:after {
  width: 5px;
  height: 5px;
  background: rgba(0,0,0,0.35);
  bottom: -5px;
  left: -5px;
  border-radius: 5px 0 0 5px;
}

.ribbon5 {
  display: inline-block;
  width: calc(100% + 20px);
  height: 50px;
  line-height: 50px;
  text-align: center;
  margin-left: -10px;
  margin-right: -10px;
  background: #EDBA19;
  position: relative;
  top: 20px;
}
.ribbon5:before {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-top: 10px solid #cd8d11;
  border-left: 10px solid transparent;
  bottom: -10px;
  left: 0;
}
.ribbon5:after {
  content: "";
  position: absolute;
  height: 0;
  width: 0;
  border-top: 10px solid #cd8d11;
  border-right: 10px solid transparent;
  right: 0;
  bottom: -10px;
}

.wrap {
  width: 100%;
  height: 188px;
  position: absolute;
  top: -8px;
  left: 8px;
  overflow: hidden;
}
.wrap:before {
  content: "";
  display: block;
  border-radius: 8px 8px 0px 0px;
  width: 40px;
  height: 8px;
  position: absolute;
  right: 100px;
  background: #4D6530;
}
.wrap:after {
  content: "";
  display: block;
  border-radius: 0px 8px 8px 0px;
  width: 8px;
  height: 40px;
  position: absolute;
  right: 0px;
  top: 100px;
  background: #4D6530;
}
.ribbon6 {
  display: inline-block;
  text-align: center;
  width: 120px;
  height: 30px;
  line-height: 30px;
  position: absolute;
  top: 10px;
  left: 5px;
  z-index: 2;
  overflow: hidden;
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  border: 1px dashed;
  box-shadow:0 0 0 3px #57DD43,  0px 21px 5px -18px rgba(0,0,0,0.6);
  background: #57DD43;
}
</style>